<template>
  <div class="history">
    <h2>配色历史记录</h2>
    <div class="history-list">
      <div v-for="(record, index) in historyRecords" 
           :key="index" 
           class="history-item">
        <div class="mood-info">
          <p>快乐程度: {{ record.mood.happiness }}%</p>
          <p>能量水平: {{ record.mood.energy }}%</p>
          <p>压力程度: {{ record.mood.stress }}%</p>
        </div>
        <div class="color-strip">
          <div v-for="(color, colorIndex) in record.colors" 
               :key="colorIndex"
               class="color-block"
               :style="{ backgroundColor: color }">
          </div>
        </div>
        <span class="date">{{ record.date }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HistoryView',
  data() {
    return {
      historyRecords: []
    }
  }
}
</script>

<style scoped>
.history {
  padding: 20px;
}

.history-list {
  max-width: 800px;
  margin: 0 auto;
}

.history-item {
  margin: 20px 0;
  padding: 15px;
  border-radius: 8px;
  background-color: #f5f5f5;
}

.mood-info {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 10px;
}

.color-strip {
  display: flex;
  height: 50px;
  border-radius: 4px;
  overflow: hidden;
}

.color-block {
  flex: 1;
}

.date {
  display: block;
  text-align: right;
  font-size: 0.9em;
  color: #666;
  margin-top: 10px;
}
</style> 